<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <style media="screen">
    * {margin:0; padding:0; list-style:none}

    #sms_list {width:100%;}
    #sms_list li {width:100%; position:relative; height:30px; line-height:30px; border-bottom:1px solid #333; transition:0.6s all ease; overflow:hidden;}
    #sms_list li a.btn-del {position:absolute; right:0; top:0; height:100%; width:0px; text-align:center; line-height:30px; background:#F00; color:white; text-decoration:none;transition:0.3s all ease; overflow:hidden;}
    #sms_list li a.btn-del span {width:80px; display:block;}
    </style>
    <script src="hammer.js" charset="utf-8"></script>
    <script>
    window.onload=function (){
      const sms=[
        'asdfsdfbxf多个人头是让他',
        'sdydthdfghfghdfg',
        'asdfsdfbxf多个人头是让他',
        'fhdfghdtfyu',
        'asdfsdfbxf多个人头是让他',
        'vnmvnmbnm',
        'asdfsdfbxf多个人头是让他',
      ];
      let oUl=document.getElementById('sms_list');
      let aBtnDel=document.getElementsByClassName('btn-del');

      sms.forEach(txt=>{
        let oLi=document.createElement('li');
        oLi.innerHTML=`<span>${txt}</span><a href="javascript:;" class="btn-del"><span>删除</span></a>`;

        oUl.appendChild(oLi);

        //
        let hammer=new Hammer(oLi);

        let oBtnDel=oLi.getElementsByTagName('a')[0];
        hammer.on('swipeleft', function (){
          Array.from(aBtnDel).forEach(btn=>{
            btn.style.width='0px';
          });

          oBtnDel.style.width='80px';
        });
        hammer.on('swiperight', function (){
          oBtnDel.style.width='0px';
        });

        oBtnDel.onclick=function (){
          oBtnDel.style.width='0px';

          oBtnDel.addEventListener('transitionend', function (ev){
            oLi.style.height='0px';
            oLi.style.borderBottom='0px solid #333';

            ev.cancelBubble=true;

            oLi.addEventListener('transitionend', function (){
              oUl.removeChild(oLi);
            });
          }, false);
        };
      });
    };
    </script>
  </head>
  <body>
    <ul id="sms_list"></ul>
  </body>
</html>
